/*
 * @Title: 语音导览-首页
 * @Created by: gsjPC 
 */
<template>
	<view style="background: #F6F6F6;">
		<HeaderNavInput ref='header' :config="navConfig" :rightTapHandle1="rightTapHandle1"/>
		<view class="glBanner">
			<Banner />
		</view>
		<view class="typeBar"  :style="{top:(atTop?'':statusBarHeight)}">
			<!-- <view  v-if="!atTop" class="uni-status-bar"></view> -->
			<HomeType :pageId='8' ></HomeType>
		</view>
		
		<view class="food-list" >
			<!-- <view class="mask" v-if="showMask" @touchmove.stop.prevent @click='closeMask'></view> -->
			<view class="food-area">
				<view class="food-item" v-for='(item,inedx) in likeData' :key='inedx' @click="toMap" >
					<image :src="item.img" mode="aspectFill"></image>
					<text class="food-name">{{item.name}}</text>
					<view class="food-fp">
						<text class="food-fen">{{item.des}}</text>
						<text class="food-pl">{{item.pl}}评论</text>
					</view>
					<text class="food-tip">{{item.add}}|{{item.tip}}</text>
					<text class="food-far">{{item.far}}km</text>
				</view>
			</view>
		</view>
		<view style="height: 120upx;"></view>
		<FootMenu />
		<top-view></top-view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	import Banner from '@/components/banner.vue'
	import HomeType from '@/components/HomeType.vue'
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				scrollLeft: 0,
				old: {
					scrollLeft:150
				},
				likeData:[
					{
						name:'莲鹤方壶',
						des:'隶属-沈阳故宫',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'宗教寺庙',
						img:'/static/banner.png'
					},
					{
						name:'汉王剑',
						des:'隶属-沈阳故宫',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'**青铜器',
						des:'隶属-沈阳故宫',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'圣母殿侍女彩塑像 ',
						des:'隶属-沈阳故宫',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'自然景区',
						img:'/static/banner.png'
					},
					{
						name:'鞍山玉佛苑',
						star:'4A',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'宗教寺庙',
						img:'/static/banner.png'
					},
					{
						name:'冰浴度假区',
						star:'4A',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'关门山国家森林公园',
						star:'4A',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'桓仁五女山风景区 ',
						star:'4A',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'自然景区',
						img:'/static/banner.png'
					},
				],
				
				navConfig: {
					left:{
						leftExist:true,
						ifleftGoback:true,
						leftGoback:'arrowleft',
						leftGobackColor:'#ffffff',
					},
					mid:{
						ifSearch:true,
						placeText:'输入相关景区/酒店/餐饮名称',
						isShowScan:false,
						isdisabled:false,//是否禁用搜索框
						isOpacity:1,//输入框是否半透明
						},
					right:{
						rightExist:true,
						rightIcon1:'/static/weater.png',
						rightIcon2:'',
						rightIconName1:'多云',
						rightIconName2:'',
						ifrightIcon2:false,
						ifrightIcon1:true,//是否显示第一个图标
					},
					row:{
						isShowRightRow:false, //是否显示右侧图标文字横排
						rowText:'',//文字内容
						rowIco:'',//icon
						rowTextColor:'',//文字颜色
						rowIcoColor:''//icon颜色
						},
				},
				firstLevel:true,
				levelNum:0,
				levelData:[
					{level:'全部',id:6},{level:'文物古迹',id:5},{level:'主题乐园',id:4},
					{level:'宗教景点',id:3},{level:'自然风景',id:2},{level:'文物古迹',id:1}
				],
				
			}
		},
		components: {
			uniIcon,
			Banner,
			HomeType
		},
		methods: {
			rightTapHandle1(){
				uni.navigateTo({
					url:'/pages/common/wheater'
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e.detail.scrollLeft)
				
				// this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			goRight: function() {
				this.scrollLeft = this.old.scrollLeft
				this.$nextTick(function() {
					this.scrollLeft = 200
				});
			},
			toMap(){
				uni.navigateTo({
					url:'map/map?showAll=true'
				})
			},
			chooseLv(index){
				this.levelNum = index
			},
			levelBtn(){
				this.firstLevel = !this.firstLevel
			},
			
			change(e) {
				this.current = e.detail.current;
			},
		},
		computed: {
			atTop() {
				return this.$store.state.typeTop
			}
		},
	}
</script>

<style scoped>
	.glBanner{
		width:100%;
		height:420upx;
		background-color: #ddd;
		/* position: absolute; */
		top:0;
		left: 0;
		z-index: 8;
		overflow: hidden;
	}
	.uni-status-bar {
		z-index: 20;
		background: #FFFFFF;
		top:0;
		display: block;
		width: 100%;
		height: var(--status-bar-height);
	}
	.typeBar{
		position: sticky;
		top: calc(88upx + var(--status-bar-height));
		width: 100%;
		height: auto;
		z-index: 20;
		box-shadow: 0 -1px #fff;
		/* border-top: rgba(246,246,246,1.00) solid 15upx ; */
		/* padding-top: 24upx; */
	}
	.glBanner image{
		width:100%;
		/* height: 457upx; */
	}
	.weaterAbsot{
		position: absolute;
		left:80upx;
		top:185upx;
		z-index: 9;
	}
	.weaterAbsot .top{
		margin-bottom:10upx;
		display: flex;
	}
	.weaterAbsot .uni-icon{
		margin-top: 10upx;
	}
	.weaterAbsot .top text{
		font-size:60upx;
		color: #FFFFFF;
		margin-right: 20upx;
	}
	.weaterAbsot .botm{
		display: flex;
	}
	.weaterAbsot .botm image{
		width:70upx;
		height: 54upx;
		margin-right: 14upx;
	}
	.weaterAbsot .botm text{
		font-size: 42upx;
		color: #FFFFFF;
	}
	.active{
		color: #55A0FF;
		border-bottom: 1upx solid #F6F6F6;
	}
	
	.level-area{
		width: 100%;
		height: 50upx;
		margin-top: 10upx;
	}
	.level-list{
		width: 90%;
		height: 60upx;
		 overflow-y: auto;
		display: flex;
		flex-direction: row;
		float: left;
	}
	.level-item{
		width: 33.33%;
		text-align: center;
		
	}
	.level-item text{
		font-size: 25upx;
		color: #afa8a8;
	}
	.active-span text{
		color: #0075EE;
		font-weight: bold;
		font-size: 28upx;
	}
	.level-btn-l{
		width: 8%;
		float: left;
		height: 100%;
		text-align: center;
		border-right: 2px rgb(230,225,225,0.28) inset ;
		/* background: #2C405A; */
	}
	.level-btn-l img{
		width: 32upx;
		height: 32upx;
		margin-top: 10upx;
		transform: rotate(180deg);
	}
	.level-btn-r{
		width: 8%;
		float: right;
		height: 100%;
		text-align: center;
		border-left: 2px rgb(230,225,225,0.28) inset ;
		/* background: #2C405A; */
	}
	.level-btn-r img{
		width: 32upx;
		height: 32upx;
		margin-top: 10upx;
	}
	
	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		height: 80upx;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 150upx;
		height: 50upx;
		color: #999999;
		text-align: center;
		font-size: 30upx;
		margin-top: 0;
		margin: 0  1% 2% 1%;
	}
	.scroll-view-item_H-ac{
		color: #55A0FF;
		font-size: 32upx;
	}
	.scroll-view-item_H view{
		box-sizing: border-box;
	}
	
	
	.spot-list{
		width: 100%;
		height: auto;
		display: table;
	}
	.spot-area{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		display: table;
	}
	.spot-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.spot-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.spot-item:nth-child(1),.spot-item:last-child{
		height: 652upx;
	}
	.spot-item:nth-child(1) image,.spot-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 430upx; 
	}
	.spot-item{
		height: 700upx;
	}
	.spot-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 479upx;
	}
	.spot-name{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 27upx;
		font-weight: bold;
		display: block;
	}
	.spot-name font{
		font-weight: 100;
	}
	.spot-tip{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		color: #048CFF;
		font-size: 25upx;
		display: block;
	}
	.spot-des{
		width: 293upx;
		font-size: 27upx;
		margin-left: auto;
		margin-right: auto;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.spot-prize{
		width: 293upx;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10upx;
		text-align: right;
		font-size: 30upx;
		color:#DD540A;
	}
	
	.food-list{
		width: 100%;
		height: auto;
		display: table;
		margin-top: 30upx;
		background: #F6F6F6;
	}
	.mask{
		width: 100%;
		position: absolute;
		height: 100%;
		z-index: 5;
		background: rgba(0,0,0,0.5);
	}
	.food-area{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		display: table;
		padding-bottom: 10upx;
	}
	.food-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.food-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.food-item:nth-child(1),.food-item:last-child{
		height: 413upx;
	}
	.food-item:nth-child(1) image,.food-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 270upx; 
	}
	.food-item{
		height: 479upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.food-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height:336upx;
		
	}
	.food-name{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 27upx;
		font-weight: bold;
		display: block;
	}
	
	.food-tip{
		width: 200upx;
		margin-left: 24upx;
		height: 40upx;
		/* margin-top: 20upx; */
		color: #999999;
		float: left;
		font-size: 26upx;
		display: block;
	}
	.food-pl{
		width: 80upx;
		font-size: 25upx;;
		color: #999999;
		height: 50upx;
		line-height: 54upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		
		overflow: hidden;
		float: right;
	}
	.food-fen{
		width: 200upx;
		display: block;
		height: 50upx;
		line-height: 50upx;
		text-align: left;
		float: left;
		font-size: 28upx;
		color:#999999;
	}
	.food-fp{
		width: 310upx;
		margin-left: 20upx;
		
		height: 50upx;
	}
	.food-fen .fen{
		font-size: 25upx;
	}
	.food-far{
		width: 90upx;
		margin-left: 24upx;
		height: 40upx;
		/* margin-top: 20upx; */
		color: #999999;
		float: right;
		font-size: 26upx;
		display: block;
	}
</style>
